<template>
<div class="index">
  <div class="nav">
    <ul class="nav-ul">
      <li><router-link to="/discovery">发现音乐</router-link></li>
      <li><router-link to="/recommend">推荐歌单</router-link></li>
      <li><router-link to="/newest">最新音乐</router-link></li>
      <li><router-link to="/MV">最新MV</router-link></li>
    </ul>
  </div>
  <div class="main">
    <router-view></router-view>
  </div>

  <div class="bottom">
    <audio :src="musicUrl" autoplay controls loop></audio>
  </div>
</div>

</template>

<script>

export default {
  name: "index",
  data(){
    return{
      musicUrl:"http://m801.music.126.net/20210708141417/5d027ae75…bd/be16/1c59/e1cc1699229d599ff4cd839a4cc3c956.mp3",
    }
  }
}
</script>

<style scoped>
  a{
    text-decoration: none;
  }
  .index{
    width: 100%;
    height: 50px;
  }
  .index .nav{
    width: 100%;
    height: 50px;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
    border-bottom: 1px solid #ffffff;
    position: relative;
  }
  .index .nav .nav-ul{
    width: 50%;
    height: 50px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .index .nav li{
    text-align: center;
    list-style: none;
    transition: all 0.5s;
  }
  .main{
    width: 80%;
    height: 100vh;
    margin: auto;

  }
  a{
    color: #000000;
    font-weight: 700;
    font-size: 15px;
  }
  a.router-link-active{
    color: red;
    transition: all 0.2s;
  }

  /*bottom*/
  .bottom{
    width: 100%;
    height: 40px;
    background-color: #f0f2f3;
    position: fixed;
    bottom: 0;
    z-index: 9999;
  }

  .bottom audio{
    width: 100%;
    height: 40px;
    border-radius: 0;
  }
</style>